<template>
	<view class="container">
		<uni-nav-bar title="问诊贴详情" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
			left-icon="arrowleft">
		</uni-nav-bar>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<view class="body">
			<scroll-view class="select-facility-view" @scrolltolower="handleScrolltolowerone()" scroll-y="true"
				:style="{height:setcollapseheight() + 'px'}">
				<view class="main">
					<!-- 帖子详情 -->
					<view class="content">
						<view class="oneline">
							<view class="serialnumber"></view>
							<view class="title">
								{{diagnosticItemList.invitationTitle}}
							</view>
						</view>
						<view class="contents">
							<view class="img">
								<image src="@/static/index-message/V.png"></image>
							</view>
							<view class="name">
								{{diagnosticItemList.invitationContent}}
							</view>
						</view>
						<view class="twoline">
							<view class="img3">
								<image src="@/static/index-message/jingliren.png"></image>
							</view>
							<view class="name">
								发帖人：{{userName}}
							</view>
						</view>
						<view class="twoline">
							<view class="img4">
								<image src="@/static/index-message/unit.png"></image>
							</view>
							<view class="name">
								发帖日期：{{diagnosticItemList.createTime}}
							</view>
						</view>
						<view class="twoline">
							<view class="img4">
								<image src="@/static/index-message/liulanliang.png"></image>
							</view>
							<view class="name">
								浏览量：{{diagnosticItemList.pageView}}
							</view>
						</view>
						<!-- 图片 -->
						<view class="firstimg" v-for="item in firstImgList" :key="item.invitationImgId"
							v-if="item.invitationImgUrl">
							<image :src="item.invitationImgUrl" @click="clickImg(item.invitationImgUrl)">
							</image>
						</view>
						<!-- 视频 -->
						<view class="video" v-for="it in firstVideoList" :key="it.invitationVedioId">
							<MyVideo :videoUrl="it.invitationVedioUrl"></MyVideo>
						</view>
					</view>
					<view class="replay" v-if="communicationList.length>0">
						回复
					</view>
					<!-- 交流信息 -->
					<view class="publish" v-for="(item,index) in communicationList" :key="index">
						<view class="publishuser">
							<view class="left">
								<template>
									<view class="icon" v-if="item.user && item.user.userType === 'expert_user'">
										<image src="@/static/index-message/expert.png" mode=""></image>
									</view>
									<view class="icon1" v-else>
										<image src="@/static/index-message/jingliren.png" mode=""></image>
									</view>
								</template>
								<view class="name">
									{{item.user.nickName}}
								</view>
							</view>
							<view class="right">
								{{item.createTime}}
							</view>
						</view>
						<view class="publishcontent">
							<view class="method">
								{{item.exchangeContent}}
							</view>
						</view>
						<view class="publishImg" v-if="item.picUrls" v-for="it in item.picUrlList">
							<image :src="it" mode="" style="margin: 10rpx 0;" @click="clickImg(it)"></image>
						</view>
						<view class="videoImg" style="margin-top: 20rpx;" v-if="item.vedioUrls"
							v-for="it in item.vedioUrlList">
							<MyVideo :videoUrl="it" class="video"></MyVideo>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-popup :show="showImg" mode="center" width="100%" height="100%" @close="showImg=false">
				<view class="showImg">
					<image :src="showImgUrl" mode="widthFix"></image>
				</view>
			</u-popup>
		</view>
	</view>

</template>

<script>
	import navBar from '../../../components/nav-bar/index.vue'
	import Api from '@/api/socialized-servce/specialist-consultation/expert-module/diagnostic-list/invitation-details/index.js'
	import MyVideo from "@/subPage1/components/myVideo/xcxVideo.vue"
	import userApi from '@/api/socialized-servce/specialist-consultation/user-module/my-interrogation/interrogation-detail/index.js'
	export default {
		name: 'invitation-details',
		components: {
			navBar,
			MyVideo
		},
		data() {
			return {
				invitationId: '',
				diagnosticItemList: {},
				userName: '', //发帖子
				firstImgList: [], //first-img
				firstVideoList: [],
				// 交流表信息
				communicationList: [],
				// whw
				// 上拉加载更多
				shoppingMes: {
					nowpage: 1,
					total: 0,
				},
				// 点击显示图片
				showImg: false,
				showImgUrl: '',
				resolveFlag: false,
			}
		},
		onLoad(option) {
			this.invitationId = option.id
		},
		onShow() {
			this.getDiagnosticList()
			this.getCommunicationList()
		},
		mounted() {
			this.setcollapseheight()
		},
		methods: {
			// 获取发布帖子
			async getDiagnosticList() {
				let params = {}
				let res = await userApi.queryPostList(params, this.invitationId)
				if (res.code == 200) {
					this.diagnosticItemList = res.data
					this.resolveFlag = res.data.resolveFlag
					this.userName = this.diagnosticItemList.publisher.nickName || ''
					this.firstImgList = res.data.imgList
					this.firstVideoList = res.data.vedioList
				}
			},
			// 获取交流列表
			async getCommunicationList() {
				let params = {
					invitationId: this.invitationId
				}
				let res = await userApi.queryCommunicationList(params)
				if (res.code === 200) {
					this.communicationList = res.data
					console.log(this.communicationList, 'ww');
				}
			},
			// 图片
			clickImg(e) {
				this.showImg = !this.showImg
				this.showImgUrl = e
			},
			back() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list'
				})
			},
			//上滑加载
			handleScrolltolowerone() {
				// console.log('下拉刷新');
				let len = this.shoppingMes.nowpage * 10
				// console.log(this.shoppingMes.nowpage);
				if (len >= this.shoppingMes.total) return

				// this.shoppingMes.isshowloading = true
				const params = {
					page: this.shoppingMes.nowpage,
					size: 10
				}
				this.getShopList(this.shoppingMes.nowpage, params)


			},
			//  设置可选择设施高度
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight - 20
				// #endif
				return winHeight
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F6FA;

		.body {
			margin-top: 26rpx;

			.main {
				padding: 0 40rpx;
				overflow: hidden;

				.content {
					padding: 36rpx 0;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
					border-radius: 10rpx 10rpx 10rpx 10rpx;

					.oneline {
						position: relative;

						.serialnumber {
							position: absolute;
							top: 8rpx;
							left: 0;
							width: 10rpx;
							height: 28rpx;
							background-color: #91743E;
						}

						.title {
							padding-left: 24rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #91743E;
						}
					}

					.contents {
						margin-top: 30rpx;
						display: flex;
						padding: 0 30rpx;

						.img {
							width: 35rpx;
							height: 30rpx;
							margin-right: 26rpx;

							image {
								width: 35rpx;
								height: 30rpx;
							}
						}
					}

					.twoline {
						display: flex;
						padding: 0 30rpx;
						align-items: center;
						margin-top: 18rpx;
						font-size: 26rpx;
						color: #808080;

						
						.img3 {
							width: 27rpx;
							height: 35rpx;
							margin-right: 26rpx;
						
							image {
								width: 27rpx;
								height: 35rpx;
							}
						}
						.img4 {
							width: 32rpx;
							height: 25rpx;
							margin-right: 26rpx;
						
							image {
								width: 32rpx;
								height: 25rpx;
							}
						}
					}

					.firstimg {
						padding: 0 30rpx;
						margin-top: 20rpx;
						height: 408rpx;

						image {
							width: 100%;
							height: 320rpx;
						}
					}

					.video {
						padding: 0 30rpx;
						margin-top: 10rpx;
						height: 450rpx;

						::v-deep iframe {
							width: 100% !important;
							height: 320rpx !important;
						}
					}

					.opinion {

						.opinioncontent {
							position: fixed;
							bottom: 260rpx;
							width: 80%;
							left: 50%;
							transform: translateX(-50%);
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							opacity: 1;
						}
					}

					.btn {
						position: fixed;
						bottom: 188rpx;
						left: 50%;
						width: 340rpx;
						transform: translateX(-50%);
					}

				}

				// 回复
				.replay {
					margin: 20rpx 0;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #757575;
				}

				.publish {
					padding: 30rpx 0;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);

					.publishuser {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 36rpx;
						font-size: 28rpx;
						font-family: Arial-Regular, Arial;
						font-weight: 400;
						color: #606060;

						.left {
							display: flex;
							align-items: center;

							.icon {
								width: 26rpx;
								height: 28rpx;
								margin-right: 10rpx;
							
								image {
									width: 100%;
									height: 100%;
								}
							}
							
							.icon1 {
								width: 26rpx;
								height: 32rpx;
								margin-right: 10rpx;
							
								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

					.publishcontent {
						margin-top: 24rpx;
						padding: 0 80rpx;
						font-size: 26rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #606060;
					}

					.publishImg {
						margin-top: 20rpx;
						width: 100%;
						height: 408rpx;

						image {
							width: 100%;
							height: 408rpx;
						}
					}

					.videoImg {
						margin-top: 20rpx;
						width: 100%;
						height: 408rpx;

						::v-deep iframe {
							width: 100% !important;
							height: 408rpx !important;
						}
					}
				}
			}
		}
	}

	::v-deep .u-swiper__wrapper {
		height: 100% !important;
	}

	::v-deep .u-swiper__wrapper__item__wrapper__image {
		height: 100% !important;
	}

	::v-deep .uni-stat__select {
		width: 298rpx;
		height: 62rpx;
	}

	::v-deep .uni-select__input-placeholder {
		color: #0480FB;
	}

	::v-deep .uni-textarea-textarea {
		font-size: 26rpx;
		font-weight: 400;
		color: #808080;
	}
</style>